<template>
  <div class="dialogDetailOrderAccount">
       <el-dialog
        title="分账设置"
        :visible.sync="dialogData.dialogVisible"
        :close-on-click-modal="false"
        width="690px"
      >
        <div class="nav">
           <div class="top clearfloat">
               <div class="left" :class="flag?'leftNew':''" @click="setNow">当前设置</div>
               <div class="right" :class="flag?'':'leftNew'" @click="setNow">修改记录</div>
           </div>
           <div v-if="flag">
                 <div v-if="indexListFlag==0">
                      <div class="fontNoData">
                          <p>
                              <span>当前暂无分账设置，</span>
                              <span class="handle" @click="handleSet">点击开始设置</span>
                          </p>
                      </div>
                 </div>
                 <!-- 存在设置 -->
                 <div v-if="indexListFlag==1">
                    <el-table
                        :data="tableDataTopListDetail"
                        class="tableTopList"
                        style="width: 100%">
                           
                        <el-table-column
                            label="商户名称"
                            align="center"
                             width="200"
                            >
                            <template slot-scope="scope">
                                <span>
                                    <span style="font-size: 14px;color: #E25422;" v-if="scope.row.prime">(主)</span>
                                    <span class="studentName">{{scope.row.receiverName}}</span>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="微信支付商户号"
                            align="center"
                            >
                            <template slot-scope="scope">
                                <span class="studentName">{{scope.row.receiverWxMerchantNo}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column
                            label="分账比例"
                            align="center">
                            <template slot-scope="scope">
                                <span>{{scope.row.shareRatio |splitRatio}}%</span>
                            </template>
                        </el-table-column>

                    </el-table>
                   
                    <div class="btnAll clearfloat" >
                        <div class="sumit" @click="editHandle">修改</div>
                        <div class="sumitFlase" @click="editHandleFlase">关闭</div>
                    </div>
                 </div>
                 <!-- 创建设置 -->
                 <div v-if="indexListFlag==2">
                    <el-table
                        :data="tableDataTopListSet"
                        class="tableTopList"
                        style="width: 100%">
                           
                        <el-table-column
                            label="商户名称"
                            align="center"
                             width="200"
                            >
                            <template slot-scope="scope">
                                <span v-if="scope.row.flag">
                                    <span style="font-size: 14px;color: #E25422;" v-if="scope.row.prime">(主)</span>
                                    <span class="studentName">{{scope.row.projectName}}</span>
                                </span>
                                <span v-else >
                                    <el-select v-model="scope.row.projectName" placeholder="请选择" @change="changeOption(scope.row,scope.$index)">
                                        <el-option
                                        v-for="item in options"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                        </el-option>
                                    </el-select>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="微信支付商户号"
                            align="center"
                            >
                            <template slot-scope="scope">
                                <span class="studentName">{{scope.row.wxMerchantNo}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column
                            label="分账比例"
                            align="center">
                            <template slot-scope="scope">
                                <input placeholder="请输入分账比例"  class="input el-input__inner input numberShop" @focus="changeNum(scope.row)" @keydown="keydown" @keyup="proving1(scope.row)" @blur="oninput1(scope.row)"  v-model="scope.row.shareRatio" />
                            </template>
                        </el-table-column>

                        <el-table-column
                            label="操作"
                            align="center"
                            width="80"
                        >
                            <template slot-scope="scope">
                                <div class="delect" v-if="scope.$index!=0" @click="delectTable(scope.row)">删除</div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="addTableList clearfloat" >
                        <div style="float:left;" @click="addTable">
                            <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
                                <title>编组</title>
                                <desc>Created with Sketch.</desc>
                                <g id="后台确认方案" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <g id="8" transform="translate(-366.000000, -459.000000)" fill="#E25422" fill-rule="nonzero">
                                        <g id="编组" transform="translate(366.000000, 459.000000)">
                                            <path d="M8,16 L7.99999965,16 C12.418283,16.0000002 15.9999997,12.4182833 15.9999997,8 C15.9999998,3.58171667 12.418283,-1.9539948e-14 7.99999965,-1.9539948e-14 L7.9999993,-1.19608255e-14 C3.58171597,1.93128321e-07 -6.99383333e-07,3.58171667 -6.99383333e-07,8 C-5.06255e-07,12.4182833 3.58171597,16 7.9999993,16 L8,16 Z M8,14.9333333 L7.9999997,14.9333333 C4.17083303,14.9333332 1.06666636,11.8291667 1.06666636,8 C1.06666653,4.17083333 4.17083303,1.06666667 7.9999997,1.06666667 L7.99999939,1.06666667 C11.8291661,1.0666665 14.9333327,4.17083333 14.9333327,8 C14.9333329,11.8291667 11.8291661,14.9333333 7.99999939,14.9333333 L8,14.9333333 Z" id="形状"></path>
                                            <path d="M5.33333333,7.46666667 L10.6666667,7.46666667 C10.9612183,7.46666665 11.2,7.70544833 11.2,8 C11.2,8.29455167 10.9612183,8.53333333 10.6666666,8.53333333 L5.33333331,8.53333333 C5.03878162,8.53333332 4.79999995,8.29455167 4.79999995,8 C4.79999997,7.70544833 5.03878162,7.46666667 5.33333329,7.46666667 Z M5.33333331,8.53333333 C5.62788498,8.53333335 5.86666664,8.29455167 5.86666664,8 C5.86666666,7.70544833 5.62788498,7.46666667 5.33333331,7.46666667 L10.6666667,7.46666667 C10.372115,7.46666664 10.1333333,7.70544833 10.1333333,8 C10.1333333,8.29455167 10.372115,8.53333333 10.6666667,8.53333333 C10.6666667,8.53333333 10.6666667,8.53333333 10.6666667,8.53333333 L5.33333331,8.53333333 Z" id="形状"></path>
                                            <path d="M8.53333333,5.33333333 L8.53333333,10.6666667 C8.53333333,10.9612183 8.29455167,11.2 8,11.2 C7.70544833,11.2 7.46666667,10.9612183 7.46666667,10.6666667 L7.46666667,5.33333333 C7.46666662,5.03878175 7.70544833,4.80000008 8,4.80000008 C8.29455167,4.80000004 8.53333333,5.03878175 8.53333333,5.33333341 C8.53333333,5.33333341 8.53333333,5.33333341 8.53333333,5.33333341 Z M7.46666667,5.33333333 C7.46666671,5.62788508 7.70544833,5.86666675 8,5.86666675 C8.29455167,5.8666667 8.53333333,5.62788508 8.53333333,5.33333333 L8.53333333,10.6666667 C8.53333333,10.3721151 8.29455167,10.1333334 8,10.1333334 C7.70544833,10.1333334 7.46666667,10.3721151 7.46666667,10.6666667 L7.46666667,5.33333333 Z" id="形状"></path>
                                        </g>
                                    </g>
                                </g>
                            </svg>
                            <span>新增</span>
                        </div>
                    </div>
                    <div class="btnAll clearfloat" >
                        <div class="sumit" @click="sumitHandle">确认</div>
                        <div class="sumitFlase" @click="sumitHandleFlase">取消</div>
                    </div>
                 </div>
           </div>
           <div v-else>
               <el-table
                    :data="tableDataTopList"
                    class="tableTopList tableTopListNew"
                    style="width: 100%">
                    
                    <el-table-column
                        prop="userName"
                        label="操作时间"
                        align="left"
                        >
                        <template slot-scope="scope">
                            <span class="studentName">{{scope.row.createdTime|changeDate}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                        label="操作人"
                        align="left">
                        <template slot-scope="scope">
                            <span>{{scope.row.creatorPhoneShow}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                        label="修改前分账设置"
                        align="left"
                        width="240">
                        <template slot-scope="scope">
                            <span v-for="(item,index) in scope.row.beforeValue" :key=index>
                                <p v-if="item.merchantName==null||item.merchantName=='null'">{ }-{{item.shareRatio}}%</p>
                                <p v-else>{{ '{'+item.merchantName+'}' }}-{{item.shareRatio}}%</p>
                            </span>
                        </template>
                    </el-table-column>

                    <el-table-column
                        label="修改后分账设置"
                        align="left"
                        width="240"
                    >
                        <template slot-scope="scope">
                            <!-- <span>{{scope.row.afterValue}}</span> -->
                             <span v-for="(item2,index2) in scope.row.afterValue" :key=index2>
                                 <p v-if="item2.merchantName==null||item2.merchantName=='null'">{ }-{{item2.shareRatio}}%</p>
                                 <p>{{ '{'+item2.merchantName+'}' }}-{{item2.shareRatio}}%</p>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    @current-change="pageeClick"
                    :current-page="pageNo"
                    :page-size="pageSize"
                    layout="prev, pager, next"
                    prev-text="上一页"
                    next-text="下一页"
                    align="center"
                    style="margin-top:20px;"
                    :total="evaluateCount">
                </el-pagination>
           </div>
          
        </div>
      </el-dialog>
  </div>
</template>

<script>
import api from "@/fetch/url";
import { setInterval, clearInterval } from 'timers';
import {FormatDate} from '@/utils/index.js'
import { Stream } from 'stream';
export default {
  props:["dialogData","projectIdItem"],
  data() {
    return {
      evaluateCount:0,
      flag:true,
      indexListFlag:0,  //当前没有设置
      indexListFlagOld:'',
      code:"",
      font:"获取验证码",
      flagCode:0,
      index:60,
      time:"",
      pageSize:5,
      pageNo:1,
      pageSize2:10000,
      pageNo2:1,
      tableDataTopList:[
    
      ],
      tableDataTopListSet:[],
      options: [],
        value: ''
    }
  },
  created() {
     this.init();
  },
  computed: {
    
  },
　mounted() {
     
  },
  methods: {
      pageeClick(num){
          console.log(num);
          this.pageNo=num;
          //projectShareLog  修改记录
         api.projectShareLog({
                pageSize:this.pageSize,
                pageNo:this.pageNo
             },this.projectIdItem,{
            headers: {
                'Content-Type': 'application/json;charset=UTF-8'
            }
            }).then(json => {
                if(json){
                   this.tableDataTopList=json.list;
                   this.evaluateCount=json.total;
                }
            })
      },
      init(){
            // 查询设置
            api.projectShare({},this.projectIdItem,{
            headers: {
                'Content-Type': 'application/json;charset=UTF-8'
            }
            }).then(json => {
                if(json){
                    if(json.length==0){
                        this.indexListFlag=0;
                        this.indexListFlagOld=0;
                    }else {
                        this.indexListFlag=1;
                        this.indexListFlagOld=1;
                        this.tableDataTopListDetail=json;
                    }
                }
            })

        //projectShareLog  修改记录
         api.projectShareLog({
                pageSize:this.pageSize,
                pageNo:this.pageNo
             },this.projectIdItem,{
            headers: {
                'Content-Type': 'application/json;charset=UTF-8'
            }
            }).then(json => {
                if(json){
                   this.tableDataTopList=json.list;
                   this.evaluateCount=json.total;
                }
            })

            //simplePage  查询所有商户
             api.simplePage({
                 pageNo:this.pageNo2,
                 pageSize:this.pageSize2
             },{
            headers: {
                'Content-Type': 'application/json;charset=UTF-8'
            }
            }).then(json => {
                if(json){
                   this.options=json.list;
                }
            })
            
      },
      //选择商户拉出来商户支付号
      changeOption(item,index){
        //   console.log(this.tableDataTopListSet,this.options,item.projectName,9999);
          let wxMerchantNo="";
          let name="";
          let id="";
          for(let i in this.options){
             if(this.options[i].id==item.projectName){
                 wxMerchantNo=this.options[i].wxMerchantNo;
                 name=this.options[i].name;
                 id=this.options[i].id;
             }
          }
          this.tableDataTopListSet[index].wxMerchantNo=wxMerchantNo;
          this.tableDataTopListSet[index].projectName=name;
          this.$set(this.tableDataTopListSet[index],"checkId",id);
        //   this.tableDataTopListSet[index].checkId=id;
        //   console.log( this.tableDataTopListSet,111111);
      },
      //点击修改按钮
      editHandle(){
         this.indexListFlag=2;
        //  console.log(this.tableDataTopListDetail,8888);
         for(let i in this.tableDataTopListDetail){
            //    this.tableDataTopListDetail[i].flag=true;
            //    this.tableDataTopListDetail[i].projectName=this.tableDataTopListDetail[i].receiverName;
            //    this.tableDataTopListDetail[i].wxMerchantNo=this.tableDataTopListDetail[i].receiverWxMerchantNo;
             this.$set(this.tableDataTopListDetail[i],"flag",true);
            this.$set(this.tableDataTopListDetail[i],"projectName",this.tableDataTopListDetail[i].receiverName);
            this.$set(this.tableDataTopListDetail[i],"wxMerchantNo",this.tableDataTopListDetail[i].receiverWxMerchantNo);
               this.tableDataTopListDetail[i].shareRatio=this.tableDataTopListDetail[i].shareRatio+"%";
         }
          this.tableDataTopListSet=JSON.parse(JSON.stringify(this.tableDataTopListDetail));
      },
      //点击修改的关闭按钮
      editHandleFlase(){
          this.$emit("sumitHandleFlaseFun");
      },
      //点击新增按钮
      addTable(){
           this.tableDataTopListSet.push({
              id:this.tableDataTopListSet.length+1+"yueyang",
              projectName:"",//主商户
              wxMerchantNo:"",//微信支付商户号
              shareRatio:"",
           }); 
      },
      //点击删除按钮
      delectTable(item){
        for(let i in this.tableDataTopListSet){
            if(this.tableDataTopListSet[i].id==item.id){
                this.tableDataTopListSet.splice(i,1);
            }
        }
        // console.log();
      },
      //点击当前设置
      setNow(){
        this.flag=!this.flag;
      },
      //点击开始设置
      handleSet(){
        this.indexListFlag=2;
      },
    //点击提交按钮
    sumitHandle(){
        let array=[];
        let sum=0;
        for(let i in this.tableDataTopListSet){
            if(this.tableDataTopListSet[i].projectName==""){
               this.$message({
                message: "商户名称不能为空",
                type: "error",
              });
              return false;
           }else{
               array.push(this.tableDataTopListSet[i].projectName);
           }
           if(this.tableDataTopListSet[i].shareRatio==""){
               this.$message({
                message: "分账比例不能为空",
                type: "error",
              });
              return false;
           }
           let shareRatio="";
        //    console.log(this.tableDataTopListSet[i].shareRatio,2222);
           this.tableDataTopListSet[i].shareRatio=this.tableDataTopListSet[i].shareRatio+"";
           if(this.tableDataTopListSet[i].shareRatio.indexOf("%")!=-1){
               
               shareRatio=this.tableDataTopListSet[i].shareRatio.split("%")[0];
           }
           sum=Number(sum)+Number(shareRatio);
        }
        if(sum-100>0){
            this.$message({
                message: "分账比例之和不能大于100%",
                type: "error",
              });
              return false;
        }
        let tableDataTopListSet=[...new Set(array)];
        if(tableDataTopListSet.length!=array.length){
               this.$message({
                message: "商户名称存在重复选项,请修改",
                type: "error",
              });
              return false;
        }
        // console.log(this.tableDataTopListSet,88888);
        let sharesDto=[];
        for(let i in this.tableDataTopListSet){
            let id="";
            this.tableDataTopListSet[i].id=this.tableDataTopListSet[i].id+"";
            // console.log(this.tableDataTopListSet[i].id,121212);
            if(this.tableDataTopListSet[i].id.indexOf("yueyang")!=-1){ //包含
                id="";
            }else {
                id=this.tableDataTopListSet[i].id-0;
            }
            let shareRatio="";
            this.tableDataTopListSet[i].shareRatio=this.tableDataTopListSet[i].shareRatio+"";
            if(this.tableDataTopListSet[i].shareRatio.indexOf("%")!=-1){  //包含
                   shareRatio=this.tableDataTopListSet[i].shareRatio.split("%")[0]+"";
            }
            let receiverId="";
            // console.log(id,9191991);
            if(id==''){
                 receiverId=this.tableDataTopListSet[i].checkId;
            }else {
                receiverId=this.tableDataTopListSet[i].receiverId;
            }
            sharesDto.push({
                id:id,
                shareRatio:shareRatio-0,
                receiverId:receiverId
            });
        }

           //projectSharePost
           api.projectSharePost(sharesDto,this.projectIdItem,{
            headers: {
                'Content-Type': 'application/json;charset=UTF-8'
            }
            }).then(json => {
                // console.log(json,8989898);
                if(json){
                    if(json.code==-1){
                        this.$message({
                            message: json.message,
                            type: "error",
                        });
                        return false;
                    }else {  //新增成功
                        this.$message({
                            message: "提交成功",
                            type: "success",
                        });
                        
                        // this.init();
                       // 查询设置
                        api.projectShare({},this.projectIdItem,{
                        headers: {
                            'Content-Type': 'application/json;charset=UTF-8'
                        }
                        }).then(json => {
                            if(json){
                                if(json.length==0){
                                    this.indexListFlag=0;
                                    this.indexListFlagOld=0;
                                }else {
                                    this.indexListFlag=1;
                                    this.indexListFlagOld=1;
                                    this.tableDataTopListDetail=json;
                                     for(let i in this.tableDataTopListDetail){
                                        // this.tableDataTopListDetail[i].flag=true;
                                        this.$set(this.tableDataTopListDetail[i],"flag",true);
                                        this.$set(this.tableDataTopListDetail[i],"projectName",this.tableDataTopListDetail[i].receiverName);
                                        this.$set(this.tableDataTopListDetail[i],"wxMerchantNo",this.tableDataTopListDetail[i].receiverWxMerchantNo);
                                        // this.tableDataTopListDetail[i].projectName=this.tableDataTopListDetail[i].receiverName;
                                        // this.tableDataTopListDetail[i].wxMerchantNo=this.tableDataTopListDetail[i].receiverWxMerchantNo;
                                        this.tableDataTopListDetail[i].shareRatio=this.tableDataTopListDetail[i].shareRatio+"%";
                                    }
                                    this.tableDataTopListSet=JSON.parse(JSON.stringify(this.tableDataTopListDetail));
                                    console.log(this.tableDataTopListSet,8989898989);
                                    this.$nextTick(()=>{
                                        this.indexListFlag=this.indexListFlagOld;
                                    });
                                }
                            }
                        })

                    //projectShareLog  修改记录
                    api.projectShareLog({
                            pageSize:this.pageSize,
                            pageNo:this.pageNo
                        },this.projectIdItem,{
                        headers: {
                            'Content-Type': 'application/json;charset=UTF-8'
                        }
                        }).then(json => {
                            if(json){
                            this.tableDataTopList=json.list;
                            }
                        })
                       
                    }
                }
            })
    },
    //点击取消按钮
    sumitHandleFlase(){
        this.indexListFlag=this.indexListFlagOld;
    },
    keydown(event) {
        if (event.shiftKey || event.key == "Process") {
          event.returnValue = false;
          return false;
        }
        if (
          !(event.keyCode == 46) &&
          !(event.keyCode == 8) &&
          !(event.keyCode == 37) &&
          !(event.keyCode == 39) &&
          !(event.keyCode == 110) &&
          !(event.keyCode == 190)
        ) {
          if (
            !(
              (event.keyCode >= 48 && event.keyCode <= 57) ||
              (event.keyCode >= 96 && event.keyCode <= 105)
            )
          ) {
            event.returnValue = false;
          }
        }
      },
      proving1(item) {
        let score = (item.shareRatio || "").toString();
        let value = score.match(/^\d*(\.?\d{0,1})/g)[0] || "";
        if (value == ".") {
          value = "";
        }
        if(value.indexOf(".")!=-1){
          value = value.substr(0, value.indexOf("."));
        }
        if(value.length>=3){
            value=value.substr(0,2);
        }
        for(let i in this.tableDataTopListSet){
            if(this.tableDataTopListSet[i].id==item.id){
                this.tableDataTopListSet[i].shareRatio=value;
            }
        }
      },
      changeNum(item){
        for(let i in this.tableDataTopListSet){
            if(this.tableDataTopListSet[i].id==item.id){
                // console.log(this.tableDataTopListSet[i].shareRatio,11111);
                this.tableDataTopListSet[i].shareRatio=this.tableDataTopListSet[i].shareRatio+"";
                this.tableDataTopListSet[i].shareRatio=this.tableDataTopListSet[i].shareRatio.split("%")[0];
            }
        }
      },
      oninput1(item) {
        let score = (item.shareRatio || "").toString();
        let value = score.match(/^\d*(\.?\d{0,1})/g)[0] || "";
        if(value.indexOf(".")!=-1){
          value = value.substr(0, value.indexOf("."));
        }
        
         if(value.length>=3){
            value=value.substr(0,2);
        }
        for(let i in this.tableDataTopListSet){
            if(this.tableDataTopListSet[i].id==item.id){
                if(this.tableDataTopListSet[i].shareRatio!=''){
                    this.tableDataTopListSet[i].shareRatio=value+"%";
                }
            }
        }
      },
  },
  filters: {
    changeDate(date) {
        if(date==null){
           return "";
        }
        let time= FormatDate(new Date(Number(date)),'yyyy/MM/dd hh:mm:ss'); //日期
        return time;
    },
    splitRatio(name){
        name=name+"";
        if(name.indexOf("%")!=-1){  //存在
             name=name.split("%")[0];
        }
        return name;
    }
  }
}
</script>
<style lang="scss">
.dialogDetailOrderAccount .el-dialog {
    min-height:440px;
    .el-dialog__body {
      padding:10px 0 0 0;
    }
    .el-input__inner {
        height:35px;
        line-height: 35px;
    }
    .el-table {
        position: inherit;
        border-bottom:1px solid #E9E9E9;
    }
    .tableTopListNew {
        .el-table tr td {
            border-left:1px solid #E9E9E9;
        }
    }
}
</style>
<style lang="scss" scoped>

.dialogDetailOrderAccount .el-dialog__body {
   .topFont {
     padding:0 20px 20px 20px;
     box-sizing: border-box;
    //  border-bottom: 1px solid #E9E9E9;
     font-size: 14px;
     color: #FC612A;
   }
   .nav {
       .top {
            background: #F2F2F2;
            width:100%;
            height:36px;
            padding:0 20px;
            box-sizing:border-box;
           .left{
               float: left;
               width:74px;
               height:33px;
               
               font-size: 14px;
               color: #E25422;
               line-height:33px;
               margin-top:3px;
               text-align:center;
               margin-right:20px;
               cursor: pointer;
           }
           .right {
               float: left;
               width:74px;
               height:33px;
               font-size: 14px;
               color: #777777;
               line-height:33px;
               margin-top:3px;
               text-align:center;
               cursor: pointer;
           }
           .leftNew {
               background:#fff;
           }
       }
       .fontNoData {
           width:100%;
           height:300px;
           position: relative;
           p {
               position: absolute;
               top:50%;
               margin-top:-10px;
               left:50%;
               margin-left:-105px;
               span {
                   font-size: 14px;
                   color: #262626;
               }
               .handle {
                   font-size: 14px;
                   color: #E25422;
                   cursor: pointer;
               }
           }
       }
     .btnAll {
         padding:40px 0 10px;
        .sumit,.sumitFlase {
         float: left;
         width:96px;
         height:36px;
         background: #FC612A;
         border-radius: 4px;
         line-height:36px;
         text-align:center;
         color:#fff;
         font-size: 14px;
         margin-left:12px;
         cursor: pointer;
       }
       .sumit {
           margin-left:234px;
       }
       .sumitFlase {
           background: #C3C3C3;
           border-radius: 4px;
       }
     }
   }
   .delect {
       font-size: 14px;
       color: #3E79FF;
       cursor: pointer;
   }
   .numberShop {
       text-align:center;
   }
   .addTableList {
       padding:10px 30px;
       box-sizing:border-box;
       cursor: pointer;
       svg {
           float: left;
       }
       span {
           float: left;
           margin-left:5px;
       }
   }
   .tableTopList {
       height:250px;
       overflow-y:auto;
   }
   
}
</style>